.container {
    width: 750px;
    min-height: 100vh;
    padding: 6vh 0 0 0;
}

.content {
    position: relative;
    width: 750px;
    height: 94vh;
    background-image: url('//net.huanmusic.com/gasha/%E6%89%AD%E8%9B%8B%E6%9C%BA%E8%83%8C%E6%99%AF.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.name, .collect, .notcollect, .music, .store, .show, .barrage, .chat, .gashaponImg, .time, .discount {
    position: absolute;
}

.name, .time {
    text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
    z-index: 2;
}

.collect, .gashaponImagePart, .notcollect {
    background-repeat: no-repeat;
}

.name {
    left: 24px;
    top: 24px;
    width: 610px;
    font-size: 30px;
    color: #444444;
}

.time {
    left: 24px;
    top: 70px;
    width: 610px;
    font-size: 20px;
    color: #fe9a74;
}

.collect {
    display: block;
    right: 30px;
    top: 30px;
    width: 40px;
    height: 63px;
    background-image: url('//net.huanmusic.com/gasha/%E6%94%B6%E8%97%8F%E5%89%8D.png');
}

.notcollect {
    display: block;
    right: 30px;
    top: 30px;
    width: 71px;
    height: 63px;
    background-image: url('//net.huanmusic.com/gasha/%E6%94%B6%E8%97%8F%E5%90%8E.png');
}

.music {
    right: 20px;
    bottom: 720px;
    width: 74px;
    height: 74px;
    z-index: 2;
}

.discount {
    right: 20px;
    bottom: 610px;
    height: 74px;
    width: 74px;
    background-image: url('//net.huanmusic.com/gasha/gashapon/%E7%A0%8D%E4%BB%B7%E5%9C%86.png');
    z-index: 2;
}

.store {
    left: 45px;
    bottom: 330px;
    font-size: 30px;
    width: 580px;
    z-index: 2;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 20px;
    color: #444444;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.show {
    display: block;
    position: absolute;
    bottom: 220px;
    left: 260px;
    width: 160px;
    height: 65px;
    z-index: 2;
    background-image: url('//net.huanmusic.com/gasha/gashapon/%E4%B9%B0%E5%AE%B6%E7%A7%80.png');
}

.barrage {
    right: 100px;
    bottom: 20px;

    /* background: #f27a7a; */
}

.chat {
    right: 20px;
    bottom: 20px;
    height: 60px;
    width: 60px;
    /* background: #f27a7a; */
}

.main {
    width: 670px;
    height: 970px;
    position: absolute;
    bottom: 24px;
    left: 40px;
}

.gashaponImagePart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('//net.huanmusic.com/gasha/gashapon/%E7%BB%84%2042(1).png');
    background-size: 100% 100%;
}

.centerClick {
    position: absolute;
    top: 27%;
    left: 31%;
    width: 39%;
    height: 280px;
}

.gashaponImg {
    position: absolute;
    top: 190px;
    left: 145px;
    width: 380px;
    height: 420px;
}

.modal {
    position: absolute;
}

.button1, .button2, .button3, .button4 {
    z-index: 2;
    background-image: url('//net.huanmusic.com/gasha/gashapon/%E6%89%AD%E8%9B%8B%E6%8C%89%E9%92%AE%E6%8B%B7%E8%B4%9D.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.button1 {
    bottom: 170px;
    left: 100px;
}
.button2 {
    bottom: 30px;
    left: 100px;
}
.button3 {
    bottom: 30px;
    right: 100px;
}
.button4 {
    bottom: 170px;
    right: 100px;
}

[button-attr='button-attr'] {
    width: 120px;
    height: 120px;
    position: absolute;
}

.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    
    z-index: 10;
    width: 400px;
    height: 200px;
    background: #ffffff;
    border-radius: 20px;
    color: #f27a7a;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.discountModal {
    position: fixed;
    z-index: 50;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.modalconten {
    width: 460px;
    height: 460px;
    border-radius: 20px;
}

.progress {
    position: relative;
    width: 400px;
    height: 50px;
    border: 2px solid #dddddd;
    border-radius: 20px;
}

.progress > span {
    display: block;
    position: absolute;
    right: 20px;
    font-size: 26px;
    line-height: 50px;
}

.test {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, rgb(254, 162, 112)), color-stop(0%, rgba(255, 255, 255)));
    background-image: linear-gradient(to right, rgb(254, 162, 112) 10%, rgba(255, 255, 255) 0%);
}

.fore_bg {
    position: absolute;
    height: 180px;
    width: 155px;
    bottom: 48px;
    left: 302px;
}

.item {
    position: relative;
    margin-bottom: 10px;
}

.item > i.uncheck {
    position: absolute;
    top: 25px;
    left: -30px;
    display: block;
    width: 30px;
    height: 30px;
    background-image: url('//net.huanmusic.com/gasha/确认前.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.item > i.check {
    position: absolute;
    top: 25px;
    left: -30px;
    display: block;
    width: 30px;
    height: 30px;
    background-image: url('//net.huanmusic.com/gasha/小确认.png');
    background-repeat: no-repeat;
    background-size: cover;
}